@if (page$ | async; as page) {
  @if (page.body && page.body[0]) {
    @let component = page.body[0];
    @if (component.type === 'theme-preview') {
      <div class="theme-preview">
        @for (item of component.top; track item) {
          <app-dynamic-component [inputs]="item" />
        }
        <div class="bg-colors grid grid-cols-10 gap-5">
          @for (color of component.bgColors.lists; track color) {
            <div
              class="box col-span-4 md:col-span-{{ component.bgColors.row }}"
              [ngClass]="color.classes"
            >
              <div class="label">{{ color.label }}</div>
            </div>
          }
        </div>
        <mat-divider class="m-y-lg" />
        <div class="row grid grid-cols-12 gap-5">
          @for (item of component.row; track item) {
            <app-dynamic-component class="item col-span-12 sm:col-span-4" [inputs]="item" />
          }
        </div>
        <div class="columns">
          <div class="wrapper grid grid-cols-12 gap-5">
            @for (column of component.columns; track column) {
              <div class="item flex flex-col col-span-12 sm:col-span-4 overflow-hidden">
                @for (item of column; track item) {
                  <app-dynamic-component class="box" [inputs]="item" />
                }
              </div>
            }
          </div>
        </div>
        @for (item of component.bottom; track item) {
          <app-dynamic-component [inputs]="item" />
        }
      </div>
    }
  }
}
